<template>
    <div>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="标题：" style="width: 380px;">
      <el-input v-model="form.paymentTitle" placeholder="请输入标题" clearable />
    </el-form-item>
    <el-form-item label="付款日期：">
      <el-date-picker
        v-model="form.paymentData"
        type="date"
        placeholder="请选择日期"
        clearable
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="审批状态：">
      <el-select
        v-model="form.paymentState"
        placeholder="请选择状态"
        clearable
        style="width: 180px;"
      >
       <!--  待审批=1,已通过,已拒绝,待提交-->
        <el-option label="待审批" value="1" />
        <el-option label="已通过" value="2" />
        <el-option label="已拒绝" value="3" />
        <el-option label="待提交" value="4" />
      </el-select>
    </el-form-item>
    <br/>
    <el-form-item label="审批人：" style="width: 380px;">
      <el-input v-model="form.paymentName" placeholder="请输入审批人" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getPaymentsList">查询</el-button>
    </el-form-item>
  </el-form>
        <el-button type="primary" size="default" @click="Add">新增</el-button>
        <el-button type="danger" @click="batchDelete()">批量删除</el-button>
        <!-- <input type="file" @change="importExcel" /> -->
        <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
             <el-table-column type="selection"  width="55"  />
            <el-table-column prop="paymentTitle" label="标题" width="center" />
            <el-table-column prop="paymentDescription" label="用途描述" width="center" />
            <el-table-column prop="paymentMoneys" label="付款金额" width="center" />
            <el-table-column prop="paymentMoney" label="付款方式" width="center" >
                <template v-slot="scope">
                    <!--  微信支付=0,支付宝支付=10,银联支付=20，企业转账=30，线下支付=40，其它=50-->
                      <el-tag v-if="scope.row.paymentMoney === 0" type="success">微信支付</el-tag>
                      <el-tag v-if="scope.row.paymentMoney === 10" type="warning">支付宝支付</el-tag>
                      <el-tag v-if="scope.row.paymentMoney === 20" type="danger">银联支付</el-tag>
                      <el-tag v-if="scope.row.paymentMoney === 30" type="info">企业转账</el-tag>
                      <el-tag v-if="scope.row.paymentMoney === 40" type="primary">线下支付</el-tag>
                      <el-tag v-if="scope.row.paymentMoney === 50" type="danger">其它</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="paymentWhoPay" label="支付对象" width="center" />
            <el-table-column prop="paymentBank" label="开户行" width="center" />
            <el-table-column prop="paymentAccount" label="银行账号" width="center" />
            <!-- 图片 -->
             <el-table-column prop="paymentTicketAttachments" label="图片" width="center">
                <template v-slot="scope">
                    <el-image :src="scope.row.paymentTicketAttachments" />
                </template>
            </el-table-column>
            <el-table-column prop="paymentApplicant" label="申请人" width="center" />
            <el-table-column prop="paymentData" label="付款日期" width="center">
                <template v-slot="scope">
                    <!-- 截取到年月日，时分秒 -->
                      {{ scope.row.paymentData.substring(0, 10)}}
                </template>
            </el-table-column>
            <el-table-column prop="paymentRemark" label="备注" width="center" />
            <el-table-column prop="paymentState" label="审批状态" width="center" >
                <template v-slot="scope">
                    <!--  待审批=1,已通过,已拒绝,待提交-->
                       <el-tag v-if="scope.row.paymentState === 0" type="warning">待提交</el-tag>
                      <el-tag v-if="scope.row.paymentState === 1" type="warning">待审批</el-tag>
                    <el-tag v-if="scope.row.paymentState === 2" type="success">已通过</el-tag>
                    <el-tag v-if="scope.row.paymentState === 3" type="danger">已拒绝</el-tag>
                    <el-tag v-if="scope.row.paymentState === 4" type="info">待提交</el-tag>
                </template>
            </el-table-column>
             <el-table-column prop="paymentName" label="审批人"  width="center" />
            <el-table-column label="操作" width="210">
                <template v-slot="scope">
                    <el-button type="primary" link @click="check(scope.row.paymentId)">查看</el-button>
                    <!-- <el-button plain  @click="dialogVisible = true">查看</el-button> -->
                    <el-button type="primary" link @click="Del(scope.row.paymentId)">删除</el-button>
                    <!-- 判断审批状态按钮如果核对信息是1和2按钮显示删除+查看，如果是3则显示编辑删除查看重新提交按钮，如果是4则显示编辑删除查看 提交审批按钮-->
                    <el-button v-if=" scope.row.paymentState === 3|| scope.row.paymentState === 4" type="primary" link @click="upd(scope.row.paymentId)">编辑</el-button>
                    <el-button v-if="scope.row.paymentState === 3" type="primary" link @click="upds(scope.row.paymentId)">重新提交</el-button>
                    <el-button v-if="scope.row.paymentState === 1" type="primary" link @click="upds(scope.row.paymentId)">提交审批</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div>
        <table>
            <tr>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" layout="total, slot" prev-text="上一页"
                        next-text="下一页" :total="form.listCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        每页显示{{ form.pageSize }}条，当前第{{ form.pageIndex }}/{{ form.pageCount }}页
                    </el-pagination>
                </td>
                <td><el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" layout=" slot,prev, pager, next" prev-text="上一页"
                        next-text="下一页" :total="form.listCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" @hide-on-single-page="form.pageIndex = 1">
                        <el-button type="primary" :disabled="form.pageIndex == 1" size="small"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" layout="slot, sizes, jumper" prev-text="上一页"
                        next-text="下一页" :total="form.listCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" @hide-on-single-page="form.pageIndex = form.pageCount">
                        <el-button type="primary" :disabled="form.pageIndex == form.pageCount" size="small"
                            @click="handleCurrentChange(form.pageCount)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </table>
    </div>

    <!-- <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 5, 8, 10]"
        :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="form.listCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->

      <el-dialog v-model="dialogTableVisible" title="查看付款信息" width="1100">
    <el-table :data="paymentData">
            <el-table-column prop="paymentTitle" label="标题" width="center" />
            <el-table-column prop="paymentDescription" label="用途描述" width="center" />
            <el-table-column prop="paymentMoneys" label="付款金额" width="center" />
            <el-table-column prop="paymentManner" label="付款方式" width="center" >
                <template v-slot="scope">
                    <!--  微信=1,支付宝=2,银行卡=3-->
                      <el-tag v-if="scope.row.paymentManner === 1" type="success">微信支付</el-tag>
                    <el-tag v-if="scope.row.paymentManner === 2" type="primary">支付宝支付</el-tag>
                    <el-tag v-if="scope.row.paymentManner === 3" type="danger">银联支付</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="paymentWhoPay" label="支付对象" width="center" />
            <el-table-column prop="paymentBank" label="开户行" width="center" />
            <el-table-column prop="paymentAccount" label="银行账号" width="center" />
            <!-- 图片 -->
             <el-table-column prop="paymentTicketAttachments" label="图片" width="center">
                <template v-slot="scope">
                    <el-image :src="scope.row.paymentTicketAttachments" />
                </template>
            </el-table-column>
            <el-table-column prop="paymentApplicant" label="申请人" width="center" />
            <el-table-column prop="paymentData" label="付款日期" width="center">
                <template v-slot="scope">
                    <!-- 截取到年月日，时分秒 -->
                      {{ scope.row.paymentData.substring(0, 19).replace('T','') }}
                </template>
            </el-table-column>
            <el-table-column prop="paymentRemark" label="备注" width="center" />
            <el-table-column prop="paymentState" label="审批状态" width="center" >
                <template v-slot="scope">
                    <!--  待审批=1,已通过,已拒绝,待提交-->
                       <el-tag v-if="scope.row.paymentState === 0" type="warning">待提交</el-tag>
                      <el-tag v-if="scope.row.paymentState === 1" type="warning">待审批</el-tag>
                    <el-tag v-if="scope.row.paymentState === 2" type="success">已通过</el-tag>
                    <el-tag v-if="scope.row.paymentState === 3" type="danger">已拒绝</el-tag>
                    <el-tag v-if="scope.row.paymentState === 4" type="info">待提交</el-tag>
                </template>
            </el-table-column>
        </el-table>
  </el-dialog>

</template>
<script setup lang="ts">
import { ref, reactive, inject, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import http from '@/Http';
import axios from 'axios';
const tableData = ref([])
const router = useRouter();
import { Plus } from '@element-plus/icons-vue'
const route = useRoute();

//登录使用localStorage登录，接收登录传过来的用户的名称
const userName = localStorage.getItem('username');
const password = localStorage.getItem('password');

console.log(userName, password);

const dialogTableVisible=ref(false)
const paymentData:any=ref([])
//查看
const check=(paymentId:any)=>{
  dialogTableVisible.value=true
  axios.get('Settlementwrite/api/Payments/GetById', {
      params: {
          paymentId: paymentId
    }
  }).then((ret) => {
    paymentData.value=[ret.data.data]
    console.log(paymentData.value);
    
  })
}



const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认要关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const form = reactive({
    pageIndex: 1,
    pageSize: 3,
    pageCount: 0,
    listCount: 0,
    paymentTitle: '',
    paymentData: '',
    paymentState: '',
    paymentName: '',
})

const getPaymentsList = () => {
    axios.get("Settlementread/api/Paymentss/Get", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize,
            paymentTitle: form.paymentTitle,
            paymentData: form.paymentData,
            paymentState: form.paymentState||0,
            paymentName: form.paymentName,
        }
    })
        .then(res => {
            form.listCount = res.data.data.listCount
            form.pageCount = res.data.data.pageCount
            tableData.value = res.data.data.pageList;
            console.log(tableData.value);
        
    })
}

//修改
const upd = (paymentId: any) => {
    router.push("/PaymentManageUpdate?paymentId=" + paymentId);
}

const upds = (paymentId: any) => {
    router.push("/PaymentManageUpdates?paymentId=" + paymentId);
}


//删除
const Del = (paymentId: number) => {
    ElMessageBox.confirm(
        '您确定要删除此用户吗?', // 提示信息
        '确认删除', // 标题
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 用户点击“确定”后执行删除操作
        axios.post("Settlementwrite/api/Payments/Delete?paymentId=" + paymentId).then(res => {
            if (res.data.data > 0) {
                ElMessage({
                  message: "删除成功",
                    type: "success"
                });
                getPaymentsList(); // 刷新用户列表
            } else {
                ElMessage({
                   
                    message: "删除失败",
                    type: "warning"
                });
            }
        });
    }).catch(() => {
        // 用户点击“取消”后，可以选择不执行任何操作，或者显示提示
        ElMessage({
            message: "已取消删除",
            type: "info"
        });
    });
}

//全选反选
let paymentId = ""
const handleSelectionChange = (val: any) => {
    let ids:any = []
    val.forEach((item: any) => {
        ids.push(item.paymentId)
    })
    paymentId = ids.join(',')
}
//批量删除
const batchDelete = () => {
    if (paymentId == "") {
        ElMessage({
            message: "请选择要删除的用户",
            type: "warning"
        });
        return;
    }
    ElMessageBox.confirm(
        '您确定要删除这些用户吗?', // 提示信息
        '确认删除', // 标题
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 用户点击“确定”后执行删除操作
        axios.post("Settlementwrite/api/Payments/Delete?paymentId=" + paymentId)
            .then(res => {
            if (res.data.data > 0) {
                ElMessage({
                     message: "删除成功",
                    type: "success"
                });
                getPaymentsList(); // 刷新用户列表
            } else {
                ElMessage({
                   
                    message: "删除失败",
                    type: "warning"
                });
            }
        });
    }).catch(() => {
        // 用户点击“取消”后，可以选择不执行任何操作，或者显示提示
        ElMessage({
            message: "已取消删除",
            type: "info"
        });
    });
}

//跳转添加
const Add = () => {
    router.push("/PaymentManageAdd");
}

const Role = () => {
    router.push("/roleView");
}

const formatTime = (time: any) => {
    return time.replace('T', ' ').slice(0, 16); // 只保留前10位
}


const handleSizeChange = (val: number) => {
    //console.log(`${val} items per page`)
    form.pageSize = val;
    getPaymentsList();
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val;
    getPaymentsList();
}

onMounted(() => {
    getPaymentsList();
})
</script>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>